<template>
  <div>
    <el-tree-select
        v-if="mode === 'D'"
        v-model="form.props.value"
        :disabled="true"
        :data="data"
        :render-after-expand="false"
        style="width: 240px"
        :props="defaultProps"
    />
    <el-tree-select
        v-else
        :clearable="true"
        :disabled="form.perm === 'R'"
        v-model="form.props.value"
        :data="data"
        :render-after-expand="false"
        style="width: 240px"
        :props="defaultProps"
    />
  </div>
</template>
<script lang="ts" setup>
import request from '/@/utils/request';

 function fetchList(query?: Object) {
  return request({
    url: '/admin/accessSubarea/page?current=1&size=99',
    method: 'get',
    params: query,
  });
}
let data=ref(null)
fetchList().then(res=>{
  data.value=res.data.records
  console.log('data.value',data.value)
})
const defaultProps = {
  children: 'children',
  label: 'subareaCn',
  value:'subareaCode'
}
let props = defineProps({
  mode: {
    type: String,
    default: 'D',
  },

  form: {
    type: Object,
    default: () => {},
  },
});

const { proxy } = getCurrentInstance();

const getValidateRule = () => {
  var item = props.form;

  var checkConfig = (rule: any, value: any, callback: any) => {
    if (item.required) {
      if (value.length == 0) {
        return callback(new Error('请选择' + item.name));
      }
    }
    if (value.length == 0) {
      return callback();
    }
    return callback();
  };
  let ruleArray = [
    {
      validator: checkConfig,
      trigger: 'change',
    },
  ];
  if (item.required) {
    ruleArray.push({ required: true, message: '请选择' + item.name, trigger: 'change' });
  }
  return ruleArray;
};
defineExpose({ getValidateRule });
</script>
